<script lang="ts" setup>
import { onMounted } from 'vue';
import { showLoading, hideLoading, navigateTo } from '@tarojs/taro';
import { PlayStart as AppNutIconPlayStart } from '@nutui/icons-vue-taro';
import { SYS_REGION_BY_AREA_UNIT_AND_AREA_FLOOR } from '/@/api/modules/base/sys-region';
import { QUERY_DEVICE_BY_AREA_IDS } from '/@/api/modules/base/device-list';
import { state } from './state';

/**
 * @function 选择标签
 * @param paneKey -标签id
 */
function selectTab({ paneKey }) {
  showLoading();
  state.floorAndDeviceList = [];

  const idx = state.list.findIndex((item) => {
    return item.id === paneKey;
  });

  state.activeUnitId = state.list[idx].id || '';
  state.activeFloorList = state.list[idx].children || [];

  QUERY_DEVICE_BY_AREA_IDS({
    comQuery: { page: 1, pageCount: 10000 },
    deviceTypeId: '1',
    deviceName: state.deviceName,
    areaIdsDtos: state.activeFloorList.map((item) => {
      return { areaId: item.id || '', areaName: item.name || '' };
    }),
  }).then((res) => {
    state.floorAndDeviceList = res.content;
    hideLoading();
  });
}

onMounted(() => {
  SYS_REGION_BY_AREA_UNIT_AND_AREA_FLOOR({ comQuery: { page: 1, pageSize: 10000 } }).then((res) => {
    state.list = res.content;

    selectTab({ paneKey: state.list[0].id });
  });
});
</script>

<template>
  <view class="video-monitor-list app-page--1">
    <app-navbar title="监控列表" />
    <nut-searchbar
      v-model="state.deviceName"
      placeholder="请输入设备名称"
      @search="selectTab({ paneKey: state.activeUnitId })"
      @clear="selectTab({ paneKey: state.activeUnitId })"
    />

    <nut-tabs
      class="app-page__wrapper app-page__wrapper--1"
      v-model="state.activeUnitId"
      title-scroll
      direction="vertical"
      size="small"
      @click="selectTab"
    >
      <nut-tab-pane
        v-for="item in state.list"
        :key="item.id"
        :title="item.name"
        :pane-key="item.id"
      >
        <scroll-view
          v-if="state.activeUnitId === item.id"
          class="app-page__wrapper"
          :scroll-y="true"
          :lower-threshold="100"
        >
          <view v-for="floorItem in state.floorAndDeviceList" :key="floorItem.areaIdsDto.areaId">
            <view class="video-monitor-list__floor-item-title">
              {{ floorItem.areaIdsDto.areaName }}
            </view>
            <nut-grid
              v-if="floorItem.content && floorItem.content.length"
              class="video-monitor-list__floor-device-list-wrapper"
              column-num="2"
              :gutter="10"
              :border="false"
            >
              <nut-grid-item
                v-for="deviceItem in floorItem.content"
                :key="deviceItem.id"
                class="video-monitor-item__wrapper"
              >
                <view
                  class="video-monitor-item"
                  @click="
                    navigateTo({
                      url: `/pages/video-monitor/detail/index?deviceId=${deviceItem.id}`,
                    })
                  "
                >
                  <view class="video-monitor-item__header">
                    <app-nut-icon-play-start class="video-monitor-item__play-icon" />
                  </view>
                  <view class="video-monitor-item__device-name">{{ deviceItem.deviceName }}</view>
                </view>
              </nut-grid-item>
            </nut-grid>
            <view v-else class="video-monitor-list__no-device">暂无设备!</view>
          </view>

          <view class="app-page__list-tips">
            <text v-if="!state.floorAndDeviceList || !state.floorAndDeviceList.length">
              暂无数据!
            </text>
          </view>
        </scroll-view>
      </nut-tab-pane>
    </nut-tabs>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
